<template>
  <el-card>
      <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item v-if="headerQuery.id">{{headerQuery.name}}</el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- 头部 -->
      <el-row style="margin-top:10px">
        <el-col :span="20">
          <el-form :inline="true" :model="form">
            <el-form-item label="目录名称" prop="tagName">
              <el-input size="small" v-model="form.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select  placeholder="请选择" size="small" v-model="form.state">
                <el-option label="已启用" value="1" ></el-option>
                <el-option label="已禁用" value="0" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearHeaderForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchArticle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <el-link icon="el-icon-back" :underline="false" type="primary" v-if="headerQuery.id" @click="$router.back()">返回学科</el-link>
            </el-col>
            <el-col :span="12">
              <el-button type="success" class="el-icon-edit" size="small" @click="addTags">新增技巧</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert type="info" show-icon :closable="false">数据一共{{total}}条</el-alert>
      <!-- 表格 -->
        <el-table border style="width: 100%" :data="tableList">
        <el-table-column label="序号" width="180" type="index" :index="indexMethod"></el-table-column>
        <el-table-column label="所属学科" width="180" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" width="180" prop="tagName"></el-table-column>
        <el-table-column label="创建者" width="180" prop="username"></el-table-column>
        <el-table-column label="创建日期" width="180">
          <template #default='{row}'>
            {{row.addDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template #default='{row}'>
            {{row.state === 1? '已启用' : '已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default='{row}'>
           <el-link type="primary" class="handle"  :underline="false"  v-html="!row.state?'启用':'禁用'" @click="editState(row)"></el-link>
           <el-link type="primary" class="handle"  :underline="false" :disabled='!!row.state' :class="{forbidden:!!row.state}" @click="editTags(row)">修改</el-link>
           <el-link type="primary" class="handle"  :underline="false" :disabled='!!row.state' :class="{forbidden:!!row.state}" @click="delTags(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="float:right;margin:20px"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.pagesize">
      </el-pagination>
      <!-- 新增标签对话框 -->
      <tags-add :addTagsDialogVisible.sync='addTagsDialogVisible' :headerQuery='headerQuery' @updateList="getList" :tagsId='tagsId'></tags-add>

  </el-card>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: { tagsAdd },
  name: 'Tags',
  data () {
    return {
      total: 0,
      headerQuery: {},
      tableList: [], // 表格数据
      form: { // 头部表单
        tagName: '',
        page: 1,
        pagesize: 10
      },
      addTagsDialogVisible: false, // 新增标签对话框
      tagsId: {} // 标签id

    }
  },
  created () {
    // 获取query信息
    this.headerQuery = this.$route.query
    this.getList()
  },
  methods: {
    // 获取表格数据
    async getList () {
      if (this.headerQuery.name) {
        this.form.subjectID = this.headerQuery.id
      }
      const { data } = await list(this.form)
      this.total = data.counts
      this.tableList = data.items
    },
    // 分页功能size改变
    handleSizeChange (newVal) {
      this.form.pagesize = newVal
      this.getList()
    },
    // 分页功能page改变
    handleCurrentChange (newVal) {
      this.form.page = newVal
      this.getList()
    }, // 设置序号
    indexMethod (index) {
      return index + 1 + this.form.pagesize * (this.form.page - 1)
    },
    // 清空表头表单
    clearHeaderForm () {
      this.form = {
        tagName: '',
        page: this.form.page,
        pagesize: this.form.pagesize
      }
    },
    // 表头搜索按钮
    searchArticle () {
      this.getList()
    },
    // 新增标签
    addTags () {
      this.addTagsDialogVisible = true
      this.tagsId = {}
    },
    // 修改标签
    editTags (data) {
      this.addTagsDialogVisible = true
      this.tagsId = data
    },
    // 修改状态
    async editState (data) {
      data.state = data.state === 0 ? 1 : 0
      await changeState(data)
      this.getList()
    },
    // 删除标签
    async delTags (data) {
      const res = await this.$confirm('此操作将永久删除此文章吗, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res === 'confirm') {
        const res = await remove(data)
        if (res.status === 200) this.$message.success('删除文章成功')
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.el-link.el-link--primary{
  margin-top: 10px;
}
.handle{
  padding: 0 5px;
}
.forbidden{
  color:grey !important;
}

</style>
